<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>下载客户端</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script type="text/javascript" src="js/jquery-3.4.1.js"></script>
		<script type="text/javascript" src="js/bootstrap.min.js"></script>
	</head>
	<style type="text/css">
		
		.ziti {
			color: white;
			font-family: "微软雅黑";
		}
		
		a:hover {
			text-decoration: none;
			color: #00BE06;
		}
		
		a {
			color: #000000;
		}
		
		#button {
			font-family: "微软雅黑";
			font-size: 20px;
			width: 215px;
			height: 45px;
			background: #C59B61;
			border: none;
			margin-top: 20px;
			border-bottom-right-radius: 30px;
			border-top-right-radius: 30px;
			border-bottom-left-radius: 30px;
			border-top-left-radius: 30px;
			outline: none;
		}
		
		.navbar {
			margin-bottom: auto;
			padding-left: 160px;
			height: 65px;
		}
		
		.logo {
			padding: 19px;
		}
		
		.tupian {
			padding-top: 10px;
			position: relative;
			left: -40px;
			bottom: 5px;
		}
		
		.navbar-nav>li>a {
			padding-left: 0px;
			padding-bottom: 20px;
			padding-top: 20px;
		}
		
		.button {
			width: 75px;
			height: 40px;
			border: none;
			margin-top: 2px;
			border-bottom-right-radius: 25px;
			border-top-right-radius: 25px;
			background-color: #C8A06A;
			padding-right: 70px;
		}
		
		.button>span {
			position: absolute;
			top: 11px;
			margin-right: 50px;
		}
		
		.dh {
			width: 260px;
			height: 40px;
			border: none;
			background-color: #333333;
			float: left;
			margin-top: 3px;
			border-bottom-left-radius: 25px;
			border-top-left-radius: 25px;
			outline: none;
			opacity: 0.5;
		}
		
		.form-group {
			margin-right: 50px;
		}
		
		#back {
			background-image: url(img/tq-banner-bg@2x.jpg);
			height: 400px;
		}
		
		.toubu1 {
			background-color: black;
			width: 530px;
			height: 24px;
			font-size: 15px;
			position: absolute;
			left: 120px;
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
		}
		
		.toubu2 {
			background-color: black;
			width: 390px;
			height: 24px;
			font-size: 15px;
			position: absolute;
			left: 185px;
			border-bottom-left-radius: 20px;
			border-bottom-right-radius: 20px;
			border-top-left-radius: 20px;
			border-top-right-radius: 20px;
		}
		
		.toubu1 a {
			font-size: 13px;
			color: white;
			margin-left: 16px;
			padding-left: 5px;
		}
		
		.toubu2 a {
			font-size: 13px;
			color: white;
			margin-left: 16px;
			padding-left: 5px;
		}
		
		.toubu1 a:hover {
			color: #C8A06A;
			text-decoration: none;
		}
		
		.toubu2 a:hover {
			color: #C8A06A;
			text-decoration: none;
		}
		
		.huangjin1 {
			color: #E3BA77;
			font-size: 40px;
			font-weight: 400;
		}
		
		.huangjin2 {
			color: #FFEFD7;
			font-size: 40px;
			font-weight: 400;
		}
		
		.xiaozi1 {
			position: absolute;
			color: #E3BA77;
			font-size: 20px;
			top: 95px;
			right: 30px;
		}
		
		.xiaozi2 {
			position: absolute;
			color: #D6BE97;
			font-size: 20px;
			top: 85px;
			right: -8px;
		}
		
		.an1 {
			border-radius: 100px;
			width: 165px;
			height: 35px;
			position: absolute;
			top: 165px;
			left: 170px;
			color: #E3BA77;
			background-color: transparent;
			font-size: 18px;
			border-color: #E3BA77;
		}
		
		.an2 {
			border-radius: 100px;
			width: 165px;
			height: 35px;
			position: absolute;
			top: 165px;
			left: 225px;
			color: #D6BE97;
			background-color: transparent;
			font-size: 18px;
			border-color: #D6BE97;
		}
		
		.dfk {
			background-color: #F9F9F9;
			width: 260px;
			height: 125px;
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
		}
		
		.dfk:hover {
			background-color: saddlebrown;
		}
		
		.banquan a {
			color: #000000;
		}
		
		.banquan a:hover {
			text-decoration: none;
			color: #E3BA77;
		}
		
		.VIP {
			position: absolute;
			min-width: 185px;
			padding-top: 14px;
			left: -82px;
			margin-top: 14px;
		}
		
		.denglu {
			border-bottom-left-radius: 5px;
			border-bottom-right-radius: 5px;
			border-top-left-radius: 5px;
			border-top-right-radius: 5px;
			color: white;
			background-color: #C8A06A;
			border: none;
			margin-left: 50px;
		}
	</style>

	<body>
		<nav class="navbar navbar-inverse">

			<div class="container-fluid">
				<!-- Brand and toggle get grouped for better mobile display -->
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
					<a class="logo" href="index.html"><img src="img/2019-12-09_083755.png" class="tupian"></a>
				</div>

				<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
					<ul class="nav navbar-nav">

						<li>
							<a href="DianShiJu.html">电视剧</a>
						</li>
						<li>
							<a href="#">电影</a>
						</li>
						<li>
							<a href="ReSouBang.html">热搜榜</a>
						</li>
						
					</ul>
					<form class="navbar-form navbar-left" role="search">

						<div class="form-group">
							<input type="text" placeholder="木鱼" style="color: white; padding-left: 15px;" class="dh">
							<button class="input-group-addon glyphicon glyphicon-search button" id="basic-addon1"><span>搜全网</span></button>
						</div>
					</form>

					<ul class="nav navbar-nav">
						<li class="dropdown">
							<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
								<div class="t" style="position: relative;bottom: 25px;right: 20px;"><img src="img/2019-12-14_113538.png" class="vipchatu" />
								<ul class="dropdown-menu VIP">
									<li>
										<a href="vip1.html">
											<p><img src="img/10e25c7db4664aeea5f3650a7962d722.png"style="width: 25px;height: 25px;float: left;position: relative;left: -6px;bottom: 3px;"/>了解VIP会员特权</p>
										</a>
									</li>
									<li>
										<a href="vip2.html">
											<p><img src="img/4e2e4b297d294926b025d86b8b619d85.png"style="width: 25px;height: 25px;float: left;position: relative;left: -6px;bottom: 3px;"/>领取VIP会员福利</p>
										</a>
									</li>
									<li>
										<a href="vip3.html">
											<p><img src="img/fe1d5f33d4034eb0ab61a7abf0ce222f.png"style="width: 25px;height: 25px;float: left;position: relative;left: -6px;bottom: 3px;"/>做任务，领奖励</p>
										</a>
									</li>
									<li>
										<a href="#">
											<button class="denglu" onclick="btn1()">登录</button>
										</a>
									</li>
								</ul>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="q" style="position: relative;bottom: 8px;">
									<div class="glyphicon glyphicon-cloud-upload ac" aria-hidden="true" style="position: relative;left: 7px;"></div>
									<div class="shangchuan">上传</div>
								</div>
							</a>
						</li>
						<li>
							<a href="KeHuDuan.html">
								<div class="w" style="position: relative;bottom: 8px;">
									<div class="glyphicon glyphicon-blackboard kh" aria-hidden="true" style="position: relative;left: 14px;"></div>
									<div class="kehu">客户端</div>
								</div>
							</a>

						</li>
						<li>

							<a href="#">
								<div class="e" style="position: relative;bottom: 8px;">
									<div class="glyphicon glyphicon-bell xx" aria-hidden="true" style="position: relative;left: 7px;"></div>
									<div class="xiaoxi">消息</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#">
								<div class="r" style="position: relative;bottom: 8px;">
									<div class="glyphicon glyphicon-dashboard kg" aria-hidden="true" style="position: relative;left: 7px;"></div>
									<div class="kanguo">看过</div>
								</div>
							</a>
						</li>
						<li>
							<a href="#"><img src="img/2019-12-15_173518.png " class="rentou" style="position: relative;bottom: 8px;" /></a>
						</li>
					</ul>
				</div>
		</nav>
		<!--导航条部分        -->

		<div class="container" style="background-color: #161616; width: 100%;">
			<div class="row" style="padding-bottom: 70px; padding-top: 30px;">
				<div class="col-md-7 text-center col-xs-7">
					<div style="padding-top: 30px;"><img src="img/focus-win.png" width="60%"></div>
				</div>
				<div class="col-md-5 ziti col-xs-5">
					<h1 style="padding-top: 30px;">爱奇艺 for Windows</h1>
					<h3>轻快 流畅 正版 超清</h3>
					<div style="padding-top:30px ;">
						<a href="#"><button id="button"><img src="img/2019-12-11_135727.png" />立即下载和安装</button></a>
					</div>
					<div style="padding-top: 30px;">最新版本：&ensp;7.1.101.1267</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row" style="padding-top: 30px; padding-bottom: 60px;">
				<div class="col-md-6 col-xs-6" style="padding-top: 50px;">
					<h3 style="color: #88651E; font-weight:bolder; font-family: '微软雅黑';">首款会“变形”视频播放软件</h3>
					<div>
						<p style="color: gray; font-family: '微软雅黑';">一个软件，两种模式！列表或是图文，黑色或是白色任由选择。</p>
					</div>
					<h3 style="color: #88651E; font-weight:bolder; font-family: '微软雅黑';">内容个性化，你的喜好你来定</h3>
					<div>
						<p style="color: gray; font-family: '微软雅黑';">根据你的观影喜好为你推荐最适合你的口味的视频内容</p>
					</div>
				</div>
				<div class="col-md-6 col-xs-6">
					<div><img src="img/screenshot-win1.png"></div>
				</div>
			</div>
		</div>
		<div class="container" style="background-color:#F8F8F8; width: 100%;">
			<div class="row" style="padding-top: 60px; padding-bottom: 60px;">
				<div class="col-md-6 col-xs-6 text-center">
					<div><img src="img/screenshot-win2.png"></div>
				</div>
				<div class="col-md-6 col-xs-6" style="padding-top: 20px;">
					<h3 style="color: #88651E; font-weight:bolder; font-family: '微软雅黑';">汇集全网视频</h3>
					<div>
						<p style="color: gray; font-family: '微软雅黑';">网罗爱奇艺、优酷、土豆、腾讯、搜狐、乐视等全部视频，一个软件看遍全网！</p>
					</div>
					<h3 style="color: #88651E; font-weight:bolder; font-family: '微软雅黑';">全部正版高清</h3>
					<div>
						<p style="color: gray; font-family: '微软雅黑';">爱奇艺上的视频均为正版授权，无法律风险。是时候抛弃那些盗版软件了！</p>
					</div>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row" style="padding-top: 80px; padding-bottom: 60px;">
				<div class="col-md-6 col-xs-6 text-center">
					<h3 style="color: #88651E; font-weight:bolder; font-family: '微软雅黑';">看片秒播，拒绝卡顿</h3>
					<div>
						<p style="color: gray; font-family: '微软雅黑';">采用爱奇艺独家研制的HCDN网络传输技术，看片从此告别卡顿!</p>
					</div>
					<h3 style="color: #88651E; font-weight:bolder; font-family: '微软雅黑';">全面支持1080p，画面清晰锐利</h3>
					<div>
						<p style="color: gray; font-family: '微软雅黑';">支持高清、超清720p、1080p、4K清晰度，智能和手动切换随你所欲！</p>
					</div>
				</div>
				<div class="col-md-6 col-xs-6">
					<div><img src="img/screenshot-win3.png"></div>
				</div>
			</div>
		</div>
		<div class="container" style="background-color:#F8F8F8; width: 100%;">
			<div class="row" style="padding-top: 50px; padding-bottom: 80px;">
				<div class="col-md-6 col-xs-6 text-center">
					<div><img src="img/screenshot-win4.png"></div>
				</div>
				<div class="col-md-6 col-xs-6" style="padding-top: 30px;">
					<h3 style="color: #88651E; font-weight:bolder; font-family: '微软雅黑';">VIP会员独享好莱坞大片</h3>
					<div>
						<p style="color: gray; font-family: '微软雅黑';">超过6000部电影大片免费观看，《破冰行动》等热门电视剧VIP会员抢先看！</p>
					</div>
					<h3 style="color: #88651E; font-weight:bolder; font-family: '微软雅黑';">尊享VIP会员超多特权</h3>
					<div>
						<p style="color: gray; font-family: '微软雅黑';">跳广告、下载加速、尊贵会员皇冠，还有超多特权等你发现。</p>
					</div>
				</div>
			</div>
		</div>
		
		<!--登录页面-->
		<div id="mymodal" class="modal fade">
				<div id="" class="modal-dialog">
					<div class="modal-content" style="width: 400px; height: 400px;">
						<div class="modal-header">
							<h4>爱奇艺&ensp;·&ensp;登录</h4>
						</div>
						<div class="modal-body">
							<div class=" row " style="margin-top: 30px;">
								<div class="col-md-3 dlfs ">
									<a href="ZhuCe1.html"><img src="img/2019-12-13_145046.png " width="50px " /></a>
								</div>
								<div class="col-md-3 dlfs ">
									<a href="WeiBo.html"><img src="img/2019-12-13_145059.png " width="50px " /></a>
								</div>
								<div class="col-md-3 dlfs ">
									<a href="QQDengLu.html"><img src="img/2019-12-13_145107.png " width="50px " /></a>
								</div>
								<div class="col-md-3 dlfs ">
									<a href="BaiDu.html"><img src="img/2019-12-13_145122.png " width="50px " /></a>
								</div>
							</div>
							<div class="row " style="margin-top: 10px;">
								<div class="col-md-3 " style="padding-left: 25px;margin-top: 25px; ">
									<a href="ZhiFuBao.html"><img src="img/2019-12-13_145129.png " width="50px " /></a>
								</div>
								<div class="col-md-3 " style="padding-left: 25px;margin-top: 20px; ">
									<a href="WeiXin.html"><img src="img/2019-12-13_145152.png" width="58px " /></a>
								</div>
							</div>
							<div class="row" style="text-align: center;margin-top: 45px;">
								<div class="col-md-12 ys " id="e">
									登录即代表同意
									<a href="# ">用户协议</a>和
									<a href="# ">隐私政策</a>
								</div>
							</div>
						</div>

						<div class="modal-footer ">
							<div class="row ">
								<div class="col-md-12 col-xs-12">
									<a href="ZhuCe1.html" style="margin-right: 140px;">注册</a>
									<a href="ZhangHanoDenLu.html">账号密码登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
									<a href="SaoMaDengLu.html">手机扫描登录</a>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		
		<hr />
		<div class="container" style="padding-top: 30px; padding-bottom: 30px; background-color:#F8F8F8; width: 100%;">
			<div class="row">
				<div class="col-md-12 col-xs-12 text-center">
					<div>
						<a href="#">公司介绍</a>|
						<a href="#">新闻动态</a>|
						<a href="#">联系方式</a>|
						<a href="#">招聘英才</a>|
						<a href="#">爱奇艺实验室</a>|
						<a href="#">开放平台</a>|
						<a href="#">爱奇艺号认证</a>|
						<a href="#">爱奇艺号</a>|
						<a href="#">爱奇艺会员合作</a>|
						<a href="#">帮助中心</a>|
						<a href="#">侵权举报与投诉</a>|
						<a href="#">用户协议</a>|
					</div>
					<p>隐私政策|
						<a href="#">About Us</a>
					</p>
					<p>
						<a href="#">反盗版和反盗链权利声明</a>&ensp;Copyright © 2019 爱奇艺 All Rights Reserved</p>
				</div>
			</div>
		</div>
	</body>
    <script type="text/javascript">
    	function btn1() {
					$('.modal').modal();
				}
    	</script>
</html>